<template>
	<view>
		<!-- 选择框 -->
		<view class='picker_view'>
			<!-- 文本 -->
			<view class='picker_text'>
				<text>{{text}}</text>
			</view>
			
			<!-- 普通选择器 -->
			<picker @change="chooseName" :value="index" :range="names" class='picker'>
				<view class="picker_input">
					<input maxlength="10" :placeholder="placeholder" :disabled="disabled" :value="value" />
				</view>
				<uni-icons class="picker_icons" type="arrowright" size="20"/>
			</picker>
		</view>
	</view>
</template>

<script>
	export default {
		name:"bdpicker",
		props: ['dc'],
		data() {
			return {
				text: this.dc.text,
				placeholder: this.dc.placeholder,
				names: this.dc.names,
				
				add_placeholder_to_names: this.dc.add_placeholder_to_names,
				index: this.dc.farther_index,
				
				disabled: true,
				value: "",
			};
		},
		
		created() {
			this.f_add_placeholder_to_names();
		},
		methods:{
			f_add_placeholder_to_names() {
				if(this.index == undefined){
					this.index = 0;
				}
				
				if(this.add_placeholder_to_names == undefined){
					this.add_placeholder_to_names = false;
				}
				
				if(this.add_placeholder_to_names){
					this.names = [this.placeholder].concat(this.names);
				}
			},
			
			retMsg () {
				var value = this.value;
				var index = this.index;
				
				if(this.add_placeholder_to_names && this.index == 0){
					index = -1;
					value = ""
				}
				var res = {
					'index': index,
					'value': value,
					'dc': this.dc,
				}
				this.$emit('retMsg', res);
			},
			chooseName (e) {
			  this.index = e.detail.value;
			  this.value = this.names[this.index];
			  // console.log("当前选择名字的索引是：",e.detail.value);
			  // console.log('--- index, current_name:', this.index, this.current_name);
			  this.retMsg();
			},
		}
	}
</script>

<style lang="scss" scoped>
	
	// 选择框
	.picker_view {
		width: 100%;
		display: flex;
		// margin: auto;
		border-top: 3upx solid #ccc;
		border-bottom: 3upx solid #ccc;
		padding: 20upx;
	}
	.picker_text {
		width: 35%;
	}
	// .picker_select {
	// 	width: 100%;
	// }
	.picker {
		width: 65%;
		float: right;
		display: flex;
	}
	.picker_input {
		// display: block;
		width: 80%;
		float: left;
		text-align: right;
	}
	.picker_icons {
		float: right;
		width: 20%;
		// margin-left: 10upx;
	}
</style>
